<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="currentIndex" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item, index) in pets" :key="item._id">
				<view class="pic">
					<image :src="item.url" mode="widthFix" @click="onPreview(index)" lazy-load=true></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">—— {{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'

	const pets = ref([])
	const currentIndex = ref(0)
	const type = ref('all')
	const classify = [{key: 'all', value: '全部'}, {key: 'dog', value: '狗'}, {key: 'cat', value: '猫'}]
	
	function onClickItem(e){
		type.value = classify[e.currentIndex].key
		pets.value = []
		network()
	}
	const values = computed(() => {
	  return classify.map(item=>item.value)
	})

	function onRefresh() {
		uni.startPullDownRefresh()
	}

	function onTop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	}

	function network() {
		uni.showNavigationBarLoading()
		uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			header:{
					'access-key':"chenzp1123"
			},
			data: {
				size: 5,
				type: type.value
			}
		}).then(res => {
			if (res.data.errCode === 0) {
				pets.value = [...pets.value, ...res.data.data]
			} else if (res.data.errCode === 400) {
				uni.showToast({
					title: res.data.errMsg,
					icon: 'none'
				})
			}
		}).catch(err => {
			uni.showToast({
				title: '请求有误，请重新刷新',
				icon: 'none'
			})
		}).finally(() => {
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	network()

	function onPreview(index) {
		uni.previewImage({
			current: index,
			urls: pets.value.map(item => item.url)
		});
	}

	onReachBottom(() => {
		network()
	})

	onPullDownRefresh(() => {
		pets.value = []
		network()
	})
</script>

<style lang='scss' scoped>
	.container {
		.menu{
			padding: 50rpx 50rpx 0;
		}
		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
				border-radius: 15rpx;

				.pic {
					image {
						width: 100%;
					}
				}

				.text {
					padding: 30rpx;
					color: #333;
					font-size: 36rpx;
				}

				.author {
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
					font-size: 30rpx;
				}
			}
		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx)
		}
	}
</style>